<script setup>
	import { ref } from 'vue'
	import { useRouter } from 'vue-router'
	import { useStore } from 'vuex'
	import { unlockscreen } from '/src/_http/api.js'
	import { ElMessage } from 'element-plus'
	const router = useRouter()
	const store = useStore()
	store.commit('user/setLockStatus', 1)
	
	let password = ref('')
	
	const clickExpand = function () {
		let classList = document.querySelector('.lock-wrap .input-wrap').classList
		classList.value.indexOf('show') == -1 ? classList.add('show') : classList.remove('show')
	}
	const clickUnlock = async function () {
		if (password.value) {
			let [res, err] = await unlockscreen({ password: password.value })
			// console.log(res)
			if (!res) return
			ElMessage({
				message: res.data.message,
				type: 'success'
			})
			store.commit('user/setLockStatus', 0)
			const backPagePath = store.state.user.backPagePath
			backPagePath ? router.push(backPagePath) : router.push('/main')
		}
	}
</script>

<template>
	<div class="lock-wrap">
		<div class="avatar-wrap" @click="clickExpand">
			<div class="user-wrap">
				<el-icon class="user-icon"><user-filled /></el-icon>
			</div>
			<div class="unlock-wrap">
				<el-icon class="unlock-icon"><unlock /></el-icon>
				<span>解锁</span>
			</div>
		</div>
		<div class="input-wrap">
			<el-input
				v-model.trim="password"
				type="password"
				placeholder="密码同登录密码"
			>
				<template #append>
					<el-button icon="Key" @click="clickUnlock" />
				</template>
			</el-input>
		</div>
	</div>
</template>

<style scoped lang="less">
	.lock-wrap {
		width: 100%;
		height: 100%;
		background: #667aa6;
		display: flex;
		align-items: center;
		justify-content: center;
		.avatar-wrap {
			width: 100px;
			height: 100px;
			border-radius: 50%;
			box-shadow: 0 0 20px -5px #fff;
			position: relative;
			z-index: 9;
			cursor: pointer;
			&:before {
				content: '已锁定';
				position: absolute;
				bottom: -50px;
				left: 50%;
				transform: translate(-50%, 0);
				color: #fff;
				font-size: 22px;
				width: 100%;
				text-align: center;
			}
			.user-wrap {
				width: 100%;
				height: 100%;
				border-radius: 50%;
				background: #272636;
				display: flex;
				align-items: center;
				justify-content: center;
				.user-icon {
					color: #fff;
					font-size: 35px;
				}
			}
			.unlock-wrap {
				width: 100px;
				height: 100px;
				border-radius: 50%;
				display: none;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				position: absolute;
				top: 0;
				left: 0;
				background: rgba(0, 0, 0, 0.5);
				color: #fff;
				.unlock-icon {
					font-size: 30px;
				}
			}
			&:hover {
				.unlock-wrap {
					display: flex;
				}
			}
		}
		.input-wrap {
			width: 0px;
			overflow: hidden;
			margin-left: -10px;
			transition: all 0.3s;
			:deep .el-input {
				.el-input__inner {
					height: 60px;
					padding: 0 20px;
					font-size: 22px
				}
				.el-input-group__append {
					padding: 0 30px;
					background: #2d8cf0;
					color: #fff;
					font-size: 30px;
					border-color: #2d8cf0;
				}
			}
		}
		.input-wrap.show {
			width: 400px;
		}
	}
</style>